<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="会员卡ID">
                <a-input placeholder="请输入会员卡ID" v-model="queryParam.card_id" allowClear></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="会员卡号">
                <a-input placeholder="请输入会员卡号" v-model="queryParam.code" allowClear></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="手机号码">
                <a-input placeholder="请输入手机号码" v-model="queryParam.phone" allowClear></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="getList()">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :border="false">
      <div class="table-operator" style="display: flex; justify-content: space-between">
        <div>
          <a-button type="primary" @click="edit('2')"> 查询修改({{ total }}) </a-button>
          <em class="ts">
            注：此操作需谨慎
          </em>
        </div>
        <a-dropdown>
          <a-menu slot="overlay">
            <a-menu-item @click="edit('1')">批量修改</a-menu-item>
          </a-menu>
          <a-button> 批量操作 </a-button>
        </a-dropdown>
      </div>

      <a-table
        :rowSelection="{ selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange }"
        size="default"
        :columns="columns"
        :data-source="list"
        :row-key="record => record.id"
        :pagination="{
          total: this.total,
          pageSize: this.pageSize,
          showSizeChanger: false,
          onChange: this.tablePageChange
        }"
      >
        <span slot="content" slot-scope="text, record">
          <div class="content">
            <div class="img">
              <a-avatar shape="square" :size="48" icon="user" :src="record.avatar_url" />
            </div>

            <div class="txt">
              <h3>{{ record.nickname }}</h3>
              <p>{{ record.phone }}</p>
            </div>
          </div>
        </span>

        <span slot="created_at" slot-scope="text, record">
          {{ record.created_at > 0 ? $moment(record.created_at * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' }}
        </span>

        <span slot="action" slot-scope="text, record">
          <a-button type="link" size="small" @click="edit('0', record)">编辑</a-button>
        </span>
      </a-table>
    </a-card>

    <a-modal v-model="visible" title="会员卡编辑" @ok="submit" :maskClosable="false">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="积分" prop="add_bonus">
          <a-input-number style="width:100%;" v-model="form.add_bonus" :min="1" :precision="0" />
        </a-form-model-item>
        <a-form-model-item label="备注信息" prop="record_bonus">
          <a-input v-model="form.record_bonus" />
        </a-form-model-item>
        <a-form-model-item label="注意" v-if="type === '2'">
          <div class="ts">本次操作影响会员总数：{{ total }}</div>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { wechatMpCardBindList, UpdateUserBonus, UpdateUserBonusByCond } from '@/api/wechartVipCard'

export default {
  data() {
    return {
      total: 0,
      pageNo: 1,
      pageSize: 10,
      columns: [
        {
          title: '会员ID',
          dataIndex: 'user_id',
          width: 80
        },
        {
          title: '用户信息',
          scopedSlots: {
            customRender: 'content'
          },
          width: 300
        },
        {
          title: '会员卡ID',
          dataIndex: 'card_id'
        },
        {
          title: '会员卡号',
          dataIndex: 'code'
        },
        {
          title: '绑定时间',
          dataIndex: 'created_at',
          scopedSlots: {
            customRender: 'created_at'
          },
          sorter: (a, b) => a.created_at - b.created_at,
          width: 200
        },
        {
          title: '操作',
          scopedSlots: {
            customRender: 'action'
          }
        }
      ],

      type: '', // 0.单个 1.批量 2.全部

      queryParam: {
        code: '',
        phone: '',
        card_id: ''
      },
      list: [],
      item: null,

      selectedRowKeys: [],
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      visible: false,
      loading: false,
      form: {
        add_bonus: '1',
        record_bonus: ''
      },
      rules: {
        add_bonus: [{ required: true, message: '请输入积分', trigger: 'blur' }],
        record_bonus: [{ required: true, message: '请输入备注信息', trigger: 'blur' }]
      }
    }
  },

  mounted() {
    this.getList()
  },

  watch: {
    visible(e) {
      if (!e) return this.$refs.ruleForm.resetFields()
    }
  },

  methods: {
    // 获取数据列表
    async getList(pageNo = 1) {
      const hide = this.$message.loading('加载中', 0)
      let { queryParam, pageSize } = this

      const res = await wechatMpCardBindList({
        ...queryParam,
        pageSize,
        pageNo
      })
      if (res.code == 0) {
        this.selectedRowKeys = []
        let { totalCount, list } = res.data
        this.total = totalCount
        this.list = list
      }
      hide()
    },

    // 分页请求
    tablePageChange(e) {
      this.getList(e)
    },

    // 选中多行
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },

    edit(type, item) {
      this.item = null

      switch (type) {
        case '0':
          this.item = item
          break

        case '1':
          if (!this.selectedRowKeys.length) return this.$message.error('至少选择一项！')
          break
      }

      this.type = type
      this.visible = true
    },

    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let { type, form, selectedRowKeys, item, queryParam } = this

          this.loading = true
          if (type === '2') {
            UpdateUserBonusByCond({
              ...form,
              cond: queryParam
            }).then(res => {
              this.loading = false

              if (!res.code) {
                this.$message.success('操作成功！')
                this.visible = false
                this.getList()
                return
              }
              this.$message.error(res.msg)
            })
          } else {
            let bind_ids = []
            if (type === '0') {
              bind_ids.push(item.id)
            } else {
              bind_ids = selectedRowKeys
            }

            UpdateUserBonus({
              ...form,
              bind_ids
            }).then(res => {
              this.loading = false

              if (!res.code) {
                this.$message.success('操作成功！')
                this.visible = false
                this.getList()
                return
              }
              this.$message.error(res.msg)
            })
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.searchBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 0 18px 0;
  /deep/ .ant-input-affix-wrapper {
    width: 220px;
    margin-right: 20px;
  }
  .select {
    display: flex;
    align-items: center;
    margin-right: 20px;
  }
}

.content {
  display: flex;
  align-items: center;
  height: 48px;
  max-width: 300px;
  overflow: hidden;

  .txt {
    margin-left: 16px;
    flex: 1;
    overflow: hidden;

    * {
      margin: 0;
      font-size: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    h3 {
      color: rgba(0, 0, 0, 0.85);
    }

    p {
      color: rgba(0, 0, 0, 0.45);
    }
  }
}

.popContent {
  .creatTime {
    padding-bottom: 10px;
  }

  .img {
    img {
      margin: 0 10px 10px 0;
      width: 100px;
      height: 100px;
      cursor: pointer;
    }
  }

  video {
    width: 100%;
    height: 400px;
  }

  h1 {
    font-size: 18px;
  }
}

.ts {
  font-style: normal;
  color: #f00;
}
</style>
